<template>
  <van-tabbar v-model="tabActive">
    <van-tabbar-item to="/">
        <span>推荐</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active1 : icon.inactive1" />
    </van-tabbar-item>

    <van-tabbar-item to="/found">
         <span>发现</span>
         <img  slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.inactive2" />
    </van-tabbar-item>

    <van-tabbar-item to="/add">
          <img slot="icon" id="add"  :src="icon.active3" />
    </van-tabbar-item>

    <van-tabbar-item  to="/message" badge="3">
          <span>消息</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.active4 : icon.inactive4" />
    </van-tabbar-item >

    <van-tabbar-item  to="/my">
          <span>我的</span>
          <img slot="icon" slot-scope="props" :src="props.active ? icon.active5 : icon.inactive5" />
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  data() {
    return {
      tabActive: 0,
      icon: {
        active1: require("../assets/iconfont/push-a.png"),
        inactive1: require("../assets/iconfont/push-i.png"),
        active2: require("../assets/iconfont/found-a.png"),
        inactive2: require("../assets/iconfont/found-i.png"),
        active3: require("../assets/iconfont//add.png"),
        active4: require("../assets/iconfont/message-a.png"),
        inactive4: require("../assets/iconfont/message-i.png"),
        active5: require("../assets/iconfont/my-a.png"),
        inactive5: require("../assets/iconfont/my-i.png"),
      }
    };
  },
  mounted() {
    switch (this.$route.path) {
      case "/found":
        this.tabActive = 1;
        break;
      case "/add":
        this.tabActive = 2;
        break;
      case "/message":
        this.tabActive = 3;
        break;
      case "/my":
        this.tabActive = 4;
        break; 
      case "/":
        this.tabActive = 0;
        break;
      default:
        this.tabActive = 0;
    }
  },
};
</script>

<style lang="less" scoped>
 #add{
      height: 30px;
 }
 /deep/ .van-tabbar-item__icon img{
   height: 25px;
 }
 /deep/ .van-tabbar-item--active{
   font-size: 15px;
 }
</style>